<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
		
		<script>
			/* 入口函数 */
			$(function () {
				/* 添加点击事件 */
				$(img1ID).click(function () {
					/* 设置循环定时器, 循环更换图片 */
					var t1 = setInterval(change,20);
					
					function change() {
							/* 创建图源数组 */
						var imgs = [
								"../../img/man00.jpg",
								"../../img/man01.jpg",
								"../../img/man02.jpg",
								"../../img/man03.jpg",
								"../../img/man04.jpg",
								"../../img/man05.jpg",
								"../../img/man06.jpg"];
						/* 生成随机索引 */
						/* var r = */ /* alert(Math.random()) */
						var index = Math.floor(Math.random() * 7);
						/* 利用随机数组索引更换属性src的值 */
						$(img1ID).prop("src",imgs[index]);
					}
					
				});
				
				
			});			
		</script>
		
		
</head>
<body>
	
	<!-- 
	 1. 给开始和停止按钮绑定点击事件
			1. 生成 0-6 的随机数r.
			2. 从数组中获取 src 
			3. 点击之后, ${小图片}.src属性= 数组[随机数r]
	 -->

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">


<!--<script language='javascript' type='text/javascript'>
    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg"
    ];

</script>-->
</body>
</html>